<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!--图标-->
	<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
	
	<!--布局框架-->
	<link rel="stylesheet" type="text/css" href="../css/util.css">
	
	<!--主要样式-->
	<link rel="stylesheet" type="text/css" href="../css/register.css">
	<script type="text/javascript">
			function check(){
				var number = document.getElementById("number").value;
				if(number == ""){
					alert("手机号不能为空");
					return false;
					}
				if(/^[0-9][1-9]{10}$/.test(number) == false){
					alert("手机号的格式不对");
					return false;
					}
				var email = document.getElementById("emial").value;	
				if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email)) { 
				   alert("邮箱格式不正确");   
				   return false;
				}
				var pwd = document.getElementById("pwd").value;
				if(pwd == ""){
					alert("密码不能为空");
					return false;
					}
				if(pwd.length < 6){
					alert("密码的长度太短，应大于6");
					return false;
					}
				if(pwd.length > 12){
					alert("密码的长度太长，应该小于12");
					return false;
					}
				var pwd2  = document.getElementById("pwd2").value;
				if(pwd != pwd2){
					alert("两次输入的密码不一样，请重新输入");
					return false;
					}
				return true;
			}
		</script>
</head>
<body>
    <div class="register">
        <div class="container-register">
            <div class="wrap-register">
                <form class="register-form validate-form" onsubmit = "return check()" method="post">
                    <span class="register-form-title">用户注册</span>
                    <div class="wrap-input">
                        <input type="text" id="name" class="register-input" name="userName" placeholder="用户名">
                        <span class="focus-input"></span>
                        <span class="symbol-input">
                            <i class="fa fa-user-plus"></i>
                        </span>
                    </div>
                    <div class="wrap-input validate-input">
                        <input type="text" id="number" class="register-input" name="userPhone" placeholder="电话号码">
                        <span class="focus-input"></span>
                        <span class="symbol-input">
                            <i class="fa fa-phone"></i>
                        </span>
                    </div>
                    <div class="wrap-input validate-input">
                        <input type="text" id="emial" class="register-input" name="userEmail" placeholder="邮箱">
                        <span class="focus-input"></span>
                        <span class="symbol-input">
                            <i class="fa fa-envelope-o"></i>
                        </span>
                    </div>
                    <div class="wrap-input validate-input">
                        <input type="password" id="pwd" class="register-input" name="userPassword1" placeholder="密码">
                        <span class="focus-input"></span>
                        <span class="symbol-input">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>
                    <div class="wrap-input validate-input">
                        <input type="password" id="pwd2" class="register-input" name="userPassword2" placeholder="再次确认密码">
                        <span class="focus-input"></span>
                        <span class="symbol-input">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>
                    <div class="container-register-form-btn">
                        <button class="register-form-btn">注册</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</body>
</html>